<template>
	<div class="innerpage">
		<Header active="2"></Header>
		<div class="page_banner" :style="'background-image:url(' + cateInfo.image + ')'">
			<div class="page-inner">
				<h1 class="f60 font-b">{{ cateInfo.name }}</h1>
			</div>
		</div>
		<Tabs :tabsList="navList" />
		<div class="page-inner page-padding">
			<div class="Graph">
				<div class="txt">
					<div class="tit f36 font-m">持證商-产品-API 图</div>
					<div class="filters">
						<div class="fcons">
							<div class="li">
								<div class="lt font-m f18">持證商</div>
								<div class="line full">
									<div class="prico"><i class="iconfont icon-sousuo"></i></div>
									<div class="in">
										<input type="text" v-model="parameters.company_name" @input="companyNameInput"
											@keyup="Search" placeholder="搜索公司名稱" />
										<div class="select" v-if="nameSelectShow">
											<div class="default" v-if="searchCompanyList.length == '0'">
												暂无数据
											</div>
											<div @click="parameters.company_name=i,nameSelectShow=false" class="item" v-for="(i, ind) in searchCompanyList" :key="ind">
												{{ i }}
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="li">
								<div class="lt font-m f18">产品</div>
								<div class="line full">
									<div class="prico"><i class="iconfont icon-sousuo"></i></div>
									<div class="in">
										<input type="text" v-model="parameters.product_name" @keyup="Search"
											@input="productNameInput" placeholder="搜索產品名稱" />
										<div class="select" v-if="productSelectShow">
											<div class="default" v-if="searchProductList.length == '0'">
												暂无数据
											</div>
											<div @click="parameters.product_name=i,productSelectShow=false" class="item" v-for="(i, ind) in searchProductList" :key="ind">
												{{ i }}
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="li">
								<div class="lt font-m f18">API</div>
								<div class="line full">
									<div class="prico"><i class="iconfont icon-sousuo"></i></div>
									<div class="in">
										<input type="text" v-model="parameters.api_name" @keyup="Search"
											@input="apiNameInput" placeholder="搜索化合物名稱" />
										<div class="select" v-if="apiNameSelectShow">
											<div class="default" v-if="searchApiList.length == '0'">
												暂无数据
											</div>
											<div @click="parameters.api_name=i,apiNameSelectShow=false" class="item" v-for="(i, ind) in searchApiList" :key="ind">
												{{ i }}
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="btns">
								<div class="btn on" @click="getData">搜索</div>
							</div>
						</div>
					</div>
				</div>
				<div class="cavs">
					<div id="cvs"></div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		getCloumnList,
		getCategoryList,
		manufacture_product_api,
		manufacturer_product_api_search_tips
	} from "@/api/sections";
	import * as echarts from "echarts";
	import da from "@/public/js/data.json";
	export default {
		async setup() {
			const info = {
				banner: "/uploadfiles/toolsban.jpg",
				subs: [{
						id: "101",
						name: "RiskMatrix",
						url: "/Tools",
					},
					{
						id: "102",
						name: "Manufacturer-Product-API Graph",
						url: "/Tools/Graph",
					},
				],
			};
			const Miserables = da;
			return {
				info,
				Miserables,
			};
		},
		data() {
			return {
				navList: [],
				cateInfo: {},
				// STAT
				parameters: {
					company_name: "",
					product_name: "",
					api_name: "",
				},
				searchCompanyList: [],
				searchProductList: [],
				searchApiList: [],
				nameSelectShow: false,
				productSelectShow: false,
				apiNameSelectShow: false
			};
		},
		methods: {
			Search: function(e) {
				const that = this;
				if (e.keyCode && e.keyCode == 13) {
					that.getData();
				}
			},
			getData() {
				manufacture_product_api(this.parameters).then((res) => {
					console.log(res, 99999);
					this.renderRelationMap(document.getElementById("cvs"), res.data);
				});
			},
			renderRelationMap: function(el, data) {
				
				let category = [{
						name: "持證商",
					},
					{
						name: "產品",
					},
					{
						name: "API",
					},
				];
				// let company = [];
				// let links = [];
				// let nodes = [];
				// data.forEach(function(i, a) {
				// 	(i.symbolSize = 16), (i.category = 1);
				// 	i.id = a + "_" + i.itemid;
				// 	nodes.push(i);
				// 	links.push({
				// 		source: i.certificate_holder.itemid,
				// 		target: i.itemid,
				// 		select: {
				// 			disabled: true,
				// 		},
				// 	});
				// 	if (!company.includes(i.certificate_holder.itemid)) {
				// 		let companynode = i.certificate_holder;
				// 		companynode.id = a + "_2_" + i.certificate_holder.itemid;
				// 		companynode.category = 0;
				// 		companynode.symbolSize = 20;
				// 		company.push(i.certificate_holder.itemid);
				// 		nodes.push(companynode);
				// 	}
				// 	i.apis.forEach(function(j, b) {
				// 		let apinode = j;
				// 		let date = new Date().getTime();
				// 		apinode.id = a + "_3_" + b;
				// 		apinode.category = 2;
				// 		apinode.symbolSize = 8;
				// 		nodes.push(apinode);
				// 		links.push({
				// 			source: i.itemid,
				// 			target: j.itemid + b,
				// 			select: {
				// 				disabled: true,
				// 			},
				// 		});
				// 	});
				// });
				let opt = {
					tooltip: {
						triggerOn: "click",
						formatter: function(params) {
							let str = "";
							let cat = params.data.category + 1;

							let id = params.data.itemid;
							if (!cat) {
								return null;
							}
							switch (cat) {
								case 1: {
									str =
										`Manufacture:<br/><a class="tooltiplink" href="/cn/Manufacturers?id=${id}">${params.data.name}</a>`;
									break;
								}
								case 2: {
									str =
										`Product:<br/><a class="tooltiplink" href="/cn/Products?id=${id}">${params.data.name}</a>`;
									break;
								}
								case 3: {
									str =
										`API:<br/><a class="tooltiplink" href="/cn/APIs?id=${id}">${params.data.name}</a>`;
									break;
								}
								default: {
									str = `${params.data.name}`;
									break;
								}
							}
							return str;
						},
					},
					legend: [{
						data: category.map((i) => {
							return i.name;
						}),
						show: true,
						left: 0,
						bottom: 0,
						orient: "vertical",
						itemWidth: $(window).width() > 768 ? 24 : 12,
						itemHeight: $(window).width() > 768 ? 24 : 12,
						itemGap: 20,
						borderRadius: 24,
						textStyle: {
							fontSize: $(window).width() > 768 ? 18 : 12,
							lineHeight: $(window).width() > 768 ? 24 : 12,
						},
					}, ],
					color: ["#538fd0", "#ec6861", "#f9e690"],
					series: [{
						type: "graph",
						draggable: true,
						layout: "force",
						force: {
							edgeLength: [15, 50],
							repulsion: [15, 50],
							gravity: 0.1,
						},
						data: data.nodes,
						links: data.links,
						categories: category,
						roam: true,
						top: "8%",
						left: $(window).width() > 768 ? 400 : 0,
						label: {
							position: "right",
						},
					}, ],
				};
				if (!el) {
					return;
				}
				let chart = echarts.init(el);
				chart.setOption(opt);
				window.addEventListener("resize", () => {
					chart.resize();
				});
			},
			companyNameInput(e) {
				if (this.parameters.company_name) {
					manufacturer_product_api_search_tips({
						keyword: this.parameters.company_name,
						type:'manufacturer',
						maxcount: 20
					}).then((res) => {
						this.searchCompanyList = res.data
						this.nameSelectShow = true;
					});
				} else {
					this.nameSelectShow = false;
				}
				console.log(e.target.value);
			},

			productNameInput(e) {
				if (this.parameters.product_name) {



					manufacturer_product_api_search_tips({
						keyword: this.parameters.product_name,
						type:'product',
						maxcount: 20
					}).then((res) => {
						this.searchProductList = res.data

						this.productSelectShow = true;
					});
				} else {
					this.productSelectShow = false;
				}
				console.log(e.target.value);
			},

			apiNameInput(e) {
				if (this.parameters.api_name) {


					manufacturer_product_api_search_tips({
						keyword: this.parameters.api_name,
						type:'api',
						maxcount: 20
					}).then((res) => {
						this.searchApiList = res.data

						this.apiNameSelectShow = true;
					});
				} else {
					this.apiNameSelectShow = false;
				}
				console.log(e.target.value);
			},

		},
		mounted: function() {
			var that = this;
			that.getData();
			getCloumnList({
				id: 1421,
			}).then((res) => {
				console.log(res, 1111);
				that.navList = res.data;
			});
			getCategoryList({
				cid: 1421,
			}).then((res) => {
				that.cateInfo = res.data;
			});
		},
	};
</script>